<template>
  <!-- <div>
    <h1>添加商品</h1>
  </div> -->
  <div id="main_form">
    <!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px">

      <!-- 商品货号 -->
      <el-form-item label="商品货号" style="width:300px">

        <el-input v-model="form.sphh"></el-input>
      </el-form-item>

      <!-- 商品名称 -->
      <el-form-item label="商品名称" style="width:300px">

        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <!-- 一二级分级版块 -->
      <div id="saixuan">

        <!-- 一级分类 -->
        <div id="yiji">

          <el-form-item label="服装种类">
            <el-select v-model="form.fzzl" placeholder="请选择">
              <el-option label="衣服" value="衣服"></el-option>
              <el-option label="裤子" value="裤子"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <!-- 二级分类 -->
        <div id="erji">
          <el-form-item label="服装季节">
            <el-select v-model="form.fzjj" placeholder="请选择">
              <el-option label="冬季" value="冬季"></el-option>
              <el-option label="夏季" value="夏季"></el-option>
            </el-select>
          </el-form-item>
        </div>

      </div>

      <!-- 支付方式 -->
      <el-form-item label="支付方式">
        <el-select v-model="form.zffs" placeholder="请选择">
          <el-option label="支付宝" value="支付宝"></el-option>
          <el-option label="微信" value="微信"></el-option>
        </el-select>
      </el-form-item>

      <!-- 供应商 -->
      <el-form-item label="上游卖家">
        <el-select v-model="form.symj" placeholder="请选择">
          <el-option label="国内" value="国内"></el-option>
          <el-option label="国外" value="国外"></el-option>
        </el-select>
      </el-form-item>

      <!-- 店铺 -->
      <el-form-item label="电商店铺">
        <el-select v-model="form.dsdp" placeholder="请选择">
          <el-option label="天猫" value="天猫"></el-option>
          <el-option label="京东" value="京东"></el-option>
        </el-select>
      </el-form-item>

      <!-- 品牌 -->
      <el-form-item label="知名品牌">
        <el-select v-model="form.zmpp" placeholder="请选择">
          <el-option label="名牌" value="名牌"></el-option>
          <el-option label="潮牌" value="潮牌"></el-option>
        </el-select>
      </el-form-item>

      <!-- 封面图 -->
      <el-form-item label="封面图片">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <!-- 包邮 -->
      <el-form-item label="是否包邮">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>

      <!-- 销售数量 -->
      <el-form-item label="销售数量">
        <el-input v-model="form.xssl" style="width:300px"></el-input>
      </el-form-item>

      <!-- 确定和取消按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加商品</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
  




<style lang="less" scoped>
#yiji,
#erji {
  width: 250px;
  float: left;
}

#saixuan {
  overflow: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.xiangqing {
  float: left;
  margin-right: 20px;
}

#main_form {
  padding: 0px 20%;
}
</style>





<script>
export default {
  data() {
    return {
      //表单的数据
      form: {
        name: '',
        sphh: '',
        fzzl: '',
        zffs: '',
        symj: '',
        dsdp: '',
        zmpp: '',
        fzjj: '',
        delivery: false,
        xssl: '',
        image: '',
      },
      imageUrl: '',
      imageUrlone: '',
      imageUrltow: '',
      imageUrlsan: '',
      imageUrlfour: '',
    };

  },
  methods: {
    //表单里的数据
    onSubmit() {
      console.log(this.form);
      console.log(this.imageUrl);
      this.image = this.imageUrl//把文件地址给from里
      console.log(this.image)
      this.$axios({
        url: '/goods/addBanner',//地址
        method: 'post',//请求方式
        data: this.form,
        //传过去的数据
      }).then((res) => {//接收
        console.log(res)
        /*  this.getallLbgl();//刷新一遍数据 */
      })
      this.form = {
        name: '',
        sphh: '',
        fzzl: '',
        zffs: '',
        symj: '',
        dsdp: '',
        zmpp: '',
        fzjj: '',
        delivery: false,
        xssl: '',
        image: '',
      }
    },


    //
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);

    },
    //文件上传的规则
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>